<template>
    <el-container>
      <el-header class="header">
			<div class="header_left">
				<div class="user">当前用户：{{store.user.userName}}</div>
				<img src="../assets/images/logo.png"/>
				<el-menu 
					style="width: 300px;"
				    :default-active="activeIndex2"
				    class="el-menu-demo"
				    mode="horizontal"
				    background-color="#545c64"
				    text-color="#fff"
				    active-text-color="#ffd04b"
				    @select="handleSelect"
				  >
				    <el-menu-item index="1" @click="toIndex()">首页</el-menu-item>
				    <el-sub-menu index="2">
				      <template #title>新闻</template>
				      <el-menu-item index="2-1">国内</el-menu-item>
				      <el-menu-item index="2-2">军事</el-menu-item>
				      <el-menu-item index="2-3">娱乐</el-menu-item>
				      <el-menu-item index="2-4">科技</el-menu-item>
				      <el-menu-item index="2-5">金融</el-menu-item>
				    </el-sub-menu>
				  </el-menu>
			</div>
			<div class="header_right">
				<el-button type="text" v-if="store.user.userName" @click="logout()">注销</el-button>
				<el-button type="text" v-else  @click="login()">登录</el-button>
				<el-button type="text" @click="toBack()">进入后台</el-button>
			</div>
	  </el-header>
      <el-main><router-view></router-view></el-main>
      <el-footer class="footer">
		<div>焦作师范高等专科学校新闻系统 @ The News Release System</div>
	  </el-footer>
    </el-container>
</template>

<script>
	import {store} from '../store.js'
	import { ElMessage } from 'element-plus'
	export default{
		data() {
			return {
				store
			}
		},
		methods:{
			toIndex(){
				//进入登录页面
				this.$router.push('/')
			},
			login(){
				//进入登录页面
				this.$router.push('/login')
			},
			logout(){
				this.store.user.userName=''
			},
			toBack(){
				if(this.store.user.role==0){
					ElMessage.error('只有管理员才能进入后台！')
				}else{
					this.$router.push('/back')
				}
				
			}
		}
	}
</script>

<style>
	.header{
		display: flex;
		background-color:#545c64 ;
		justify-content: space-between;
	}
	.header_left{
		display: flex;
		width: 50%;
		}
	.user{
		width: 30%;
		color: ghostwhite;
		line-height: 60px;
		font-size: 1.2rem;
	}
	.header_right{
		line-height: 60px;
	}
	.el-button--text{
		color: ghostwhite;
	}
	.footer{
		height: 3rem;
		line-height: 3rem;
		border-top: 1px solid darkslategrey;
		text-align: center;
	}
</style>